<template>
  <section class="my-commission">
    <div class="top- flex-col flex-center flex-middle">
      <div class="unit">积分余额</div>
      <div class="price">{{info.points}}</div>
    </div>
    <div class="item flex flex-between flex-middle" v-for="item in info.pointDtls" :key="item">
      <div>
        <div class="flex">
          <div class="title">{{typeOption[item.pointsType]}}</div>
          <div class="desc" v-if="item.pointsType == 2">订单：{{item.orderId}}</div>
        </div>
        <div class="desc mt10">{{item.createTime}}</div>
      </div>
      <div class="price" v-if="item.afterPoints-item.beforePoints>0">{{'+'+item.pointsChange}}</div>
      <div class="price-" v-else>{{item.pointsType == 2 ? item.pointsChange : '-'+item.pointsChange}}</div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      info:'',
      typeOption: {
        1: '签到积分',
        2: '使用积分',
        3: '返还积分',
        4: '邀请积分'
      }
    };
  },
  onShow() {
    this.$api.getPointDtl().then(res => {
      this.info = res.data;
      let pointDtls = res.data.pointDtls.map(item=>{
        item.createTime = this.formatDate(item.createTime,"Y-M-D h:s");
        return item;
      })
      this.$set(this.info,'pointDtls',pointDtls)
    })
  },
  methods: {
    routerTo(url) {
      wx.navigateTo({ url });
    }
  }
};
</script>
<style lang="scss" scoped>
.my-commission {
  .top- {
    height: 103px;
    background: rgba(59, 184, 253, 1);
    .unit {
      font-size: 12px;
      font-family: PingFang;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      line-height: 13px;
      margin-bottom: 25px;
    }
    .price {
      font-size: 30px;
      font-family: DIN;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      line-height: 13px;
    }
  }
  .item {
    margin: 15px;
    background: white;
    padding: 15px;
    .title {
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
      line-height: 13px;
      margin-right: 10px;
    }
    .price {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 156, 0, 1);
      line-height: 13px;
    }
    .price- {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: #3bb8fd;
      line-height: 13px;
    }
    .desc {
      font-size: 12px;
      font-family: DIN;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
      line-height: 13px;
    }
  }
}
</style>
<style lang="scss">
page {
  background: #f7f7f7;
}
</style>